<script setup>
import { ref } from 'vue';

const textValue = ref('');
const numberValue = ref(0);
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">TextInput Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic TextInput</h3>
        <div class="flex flex-col space-y-4">
          <TextInput placeholder="Default text input" v-model="textValue" />
          <div>Current value: {{ textValue }}</div>

          <TextInput placeholder="Disabled input" disabled />

          <TextInput placeholder="Required input" required />

          <TextInput placeholder="With label" aria-label="Input with label" />

          <div class="flex items-center gap-2">
            <Button
              appearance="outline"
              @click="textValue = 'New value set programmatically'"
            >
              Set Value Programmatically
            </Button>
          </div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">TextInput Variations</h3>
        <div class="flex flex-col space-y-4">
          <TextInput appearance="filled" placeholder="Filled appearance" />

          <TextInput
            appearance="underline"
            placeholder="Underline appearance"
          />

          <TextInput control-size="large" placeholder="Large input" />

          <TextInput control-size="small" placeholder="Small input" />

          <TextInput
            type="number"
            placeholder="Number input"
            v-model="numberValue"
          />
          <div>Number value: {{ numberValue }}</div>

          <TextInput type="email" placeholder="Email input" />

          <TextInput type="password" placeholder="Password input" />

          <TextInput type="search" placeholder="Search..." />

          <TextInput placeholder="With prefix and suffix">
            <template #start>
              <span>$</span>
            </template>
            <template #end>
              <span>.00</span>
            </template>
          </TextInput>
        </div>
      </div>
    </div>
  </div>
</template>
